<template>
	<div class="pop-up">
		<ul class="pop-up-top" v-if="roomTables.length">
			<li v-for="(v,index) in roomTables" @click="openActionSheet(v)" :key='index'>
				<div class="list-icon" :class=[v.imgClass]></div>
				<p>{{v.title}}</p>
			</li>
		</ul>
		<ul class="pop-up-bottom">
			<li @click="clickBoottm('share')" v-if="isShowShare">
				<div class="clear-img share"></div>
				<p>分享直播</p>
			</li>
			<li v-if="$store.state.clearDom[index].listShow" v-for='(v,index)  of clearData' :key='index'
				@click="clickClear(v,index)">
				<div class="clear-img" :class="v.imgClass"></div>
				<p>{{v.text}}</p>
			</li>
			<!-- <li @click="clickBoottm('reportPop')">
				<div class="clear-img  report"></div>
				<p>举报</p>
			</li> -->
		</ul>
	</div>
</template>

<script>
	export default {
		components: {

		},
		props: {
			roomInfo: Object //房间信息
		},
		data() {
			return {
				sheetTittle: '更多',
				isShowShare:false,
			}
		},
	created() {
		let { tables: tablesArray } = this.roomInfo;
		if (tablesArray.length) {
			for (let ele of tablesArray) {
				if (ele.type == '4' && ele.invitaCard) {
					if (this.$channel == 'zxjt') {//建投app显示
						if (window.terminal.isZxjtApp) {
							this.isShowShare = true;
						}
					} else {
						this.isShowShare = true;
					}
					return;
				}
			}
		}
	},
		computed: {
			clearData() {
				return this.$store.state.clearDom;
			},
			roomTables() { //更多列表： 视频 图文 图文链接
				return this.$store.state.roomTablesData;
			}
		},
		methods: {
			clickBoottm(type) {
				this.close(); //ReportPop
				if (type == 'reportPop') {//举报
					this.$emit('formChildMsg', {
						type: 'footerActionSheetOpen',
						data: {
							component: type,
						}
					})
				} else if (type == 'share') {
					this.$emit('formChildMsg', {
						type: 'shareLive',
					})
				}
			},
			clickClear(v, index) { //清除
				this.close()
				if (v.value === "changeRatio") {
				// 判断是否开播状态切换清晰度
							const { liveIsStart, videoErrorState } = this.$store.state;
				if (!liveIsStart && videoErrorState) {
					fun.toastMessage('当前无法切换清晰度');
					return false
				}
				// 弹出清晰度dialog
				this.$bus.$emit('showRatioDialog', true)
						} else {
							this.$store.dispatch('changeClearData', index);
						}
			},
			//打开底部弹出面板
			openActionSheet(v) {
				if (v.strType == 'liveTab') {
					this.$emit('formChildMsg', {
						type: 'footerActionSheetOpen',
						data: {
							component: v.component,
							title: v.title
						}
					})
				} else if (v.strType == 'InteractiveBtn') {
					if(v.type=='6'){//报名
						this.$emit('formChildMsg', {
							type: 'applyInfo',
							data: 'ruan'
						})
					}else{
						this.$emit('formChildMsg', {//投问答
							type: 'footerActionSheetOpen',
							data: {
								component: 'TouWenDa',
								qaInfoId:v.qaInfoId,
								qaType:v.type
							}
						})
					}					
				}
			},
			close() {
				this.$emit('formChildMsg', {
					type: 'footerActionSheetClose',
					data: ''
				})

			}
		},
	};
</script>
<style scoped lang="less">
	.pop-up {
		width: 100%;
		// height: 424px;
		background: #272727;
		position: absolute;
		left: 0;
		bottom: 0px;
		z-index: 1006;
		border-radius: 6px 6px 0px 0px;

		.pop-up-top {
			width: 100%;
			height: 212px;
			// background: firebrick;
			display: flex;
			justify-content: flex-start;
			align-items: flex-end;
			overflow-x: scroll;
			padding-left: 30px;

			li {
				width: 158px;
				height: 164px;
				// background: sandybrown;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				flex-shrink: 0;

				.list-icon {
					width: 50px;
					height: 50px;
				}

				p {
					font-size: 26px;
					font-weight: 400;
					color: #FFFFFF;
					margin-top: 10px;
				}
			}
		}

		.pop-up-bottom {
			width: 100%;
			height: 212px;
			// background: saddlebrown;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			overflow-x: scroll;
			padding-left: 30px;

			li {
				width: 158px;
				height: 164px;
				// background: sandybrown;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				flex-shrink: 0;

				.clear-img {
					width: 50px;
					height: 50px;
					// background: url(../../assets/images/nv/share_v20220121.png) no-repeat;
					background-size: 46px 46px;
				}

				p {
					font-size: 26px;
					font-weight: 400;
					color: #FFFFFF;
					margin-top: 10px;
				}
			}
		}
	}

	.clear-img.share {
		background: url(../../assets/images/nv/share_v20220121.png) no-repeat;
		background-size: 46px 46px;
	}
     .clear-img.report {
     	background: url(../../assets/images/report-footer.png) no-repeat;
     	background-size: 46px 46px;
     }
	/*  .report-img{
    background: url(../../assets/images/report.png) no-repeat;
    background-size: 46px 46px;
  } */
	.clear-img.clear-screen {
		background: url(../../assets/images/nv/clear-screen_v20220121.png) no-repeat;
		background-size: 46px 46px;
	}

	.clear-img.clear-screen1 {
		background: url(../../assets/images/nv/clear-screen1.png) no-repeat;
		background-size: 46px 46px;
	}

	.clear-img.clear-animate {
		background: url(../../assets/images/nv/clear-animate_v20220121.png) no-repeat;
		background-size: 46px 46px;
	}

	.clear-img.clear-animate1 {
		background: url(../../assets/images/nv/clear-animate1.png) no-repeat;
		background-size: 46px 46px;
	}

	.clear-img.clear-message {
		background: url(../../assets/images/nv/clear-message_v20220121.png) no-repeat;
		background-size: 46px 46px;
	}

	.clear-img.clear-message1 {
		background: url(../../assets/images/nv/clear-message1.png) no-repeat;
		background-size: 46px 46px;
	}
	.video-ratio0{
		background: url(../../assets/images/ratio-fhd.png) no-repeat;
		background-size: 46px 46px;
	}
	.video-ratio1{
		background: url(../../assets/images/ratio-hd.png) no-repeat;
		background-size: 46px 46px;
	}
	.video-ratio2{
		background: url(../../assets/images/ratio-sd.png) no-repeat;
		background-size: 46px 46px;
	}

	.header {
		line-height: 65px;
		text-align: center;
		position: relative;
	}

	.title {
		font-size: 28px;
		font-weight: bold;
		color: #EBEBEB;
	}

	.close {
		position: absolute;
		top: 0;
		right: 0;
	}

	.iconcha1 {
		padding: 0 30px;
		font-size: 18px;
		color: #EBEBEB;
	}

	.com-flex {
		padding: 20px 45px;
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
	}
	.list {
		width: 25%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.com-flex .list:last-child {
		margin-right: 0;
	}

	.list-icon {
		width: 46px;
		height: 46px;
		margin: 0 auto;
		margin-bottom: 27px;
	}

	.icon-bg2 {
		background: url(../../assets/images/nv/looking-back.png) no-repeat;
		background-size: 46px 46px;
	}

	.icon-bg3 {
		background: url(../../assets/images/nv/issue1.png) no-repeat;
		background-size: 46px 46px;
	}

	.icon-bg4 {
		background: url(../../assets/images/nv/issue.png) no-repeat;
		background-size: 46px 46px;
	}

	.icon-bg5 {
		background: url(../../assets/images/nv/hot-preduct.png) no-repeat;
		background-size: 46px 46px;
	}
    .interactive-btn1{
		background: url(../../assets/images/nv/quiz_v20220121.png) no-repeat;
		background-size: 46px 46px;
	}
	.interactive-btn3{
		background: url(../../assets/images/nv/questionnaire_v20220121.png) no-repeat;
		background-size: 46px 46px;
	}
	.interactive-btn4{
		background: url(../../assets/images/nv/vote_v20220121.png) no-repeat;
		background-size: 46px 46px;
	}
	.interactive-btn6{
		background: url(../../assets/images/nv/apply-footer.png) no-repeat;
		background-size: 46px 46px;
	}
	.list p {
		font-size: 26px;
		font-weight: bold;
		color: #EBEBEB;
		text-align: center;
	}

	img.ppt {
		width: 40px;
	}
</style>
